<template>
  <div class="facility-dialog">
    <div class="dialog-title">{{ info.deviceName }}</div>
    <div class="remote-restart-btn">
      <div class="btn-i">远程重启</div>
      <img src="@/assets/img/close.png" @click="$emit('close')"/>
    </div>

    <div class="facility-content">
      <div class="top-main">
        <div class="facility-img">
          <img src="@/assets/img/gb/img_weather.png" />
        </div>
        <div class="top-main-right">
          <div class="facility-info">
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_state.png" />
              <div>
                <div class="info-i-text">
                  {{ info.state ? "工作中" : "停止工作" }}
                </div>
                <div class="info-i-title">状态</div>
              </div>
            </div>
            <template v-for="(item, index) in info.propertys" :key="index">
              <div
                class="info-i"
                v-if="item.identifier == 'qy' || item.identifier == 'dqwd'"
              >
                <img
                  class="info-i-icon"
                  src="@/assets/img/gb/icon_voltage.png"
                  v-if="item.identifier == 'qy'"
                />
                <img
                  class="info-i-icon"
                  src="@/assets/img/gb/icon_temperature.png"
                  v-else
                />
                <div>
                  <div class="info-i-text">{{ item.value }}{{ item.unit }}</div>
                  <div class="info-i-title">{{ item.name }}</div>
                </div>
              </div>
            </template>
          </div>
          <div class="alarm-message">
            <div class="alarm-message-title">
              <img class="alarm-icon" src="@/assets/img/gb/icon_xiaox.png" />
              <div class="alarm-title">报警消息</div>
            </div>
            <div class="alarm-message-content">深层土壤湿度数据异常</div>
          </div>
        </div>
      </div>

      <div class="bottom-main">
        <div class="data-i">
          <div class="model-tltle">风向</div>
          <div class="echarts-main">
            <gauge :datas="fxDatas" />
          </div>
        </div>
        <div class="data-i">
          <div class="model-tltle">湿度</div>
          <div class="echarts-main">
            <lineMain :datas="sdlineDatas" />
          </div>
        </div>
        <div class="data-i">
          <div class="model-tltle">温度</div>
          <div class="echarts-main">
            <lineMain :datas="wdlineDatas" />
          </div>
        </div>
        <div class="data-i">
          <div class="model-tltle">降水</div>
          <div class="echarts-main">
            <lineMain :datas="jsllineDatas" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { deviceDetail, getWeatherStatistics,getWeatherDirectionAndSpeed } from "@/api/deviceInfo";
const lineMain = defineAsyncComponent(() => import("../components/line.vue"));
const gauge = defineAsyncComponent(() => import("../deviceDialog/gauge.vue"));

const info = ref({ deviceName: "" });
const fxDatas = reactive({
  xData: [],
  yData: [],
});
const wdlineDatas = reactive({
  name: "温度",
  unit: "°c",
  xData: [],
  yData: [],
});
const sdlineDatas = reactive({
  name: "湿度",
  unit: "%",
  xData: [],
  yData: [],
});
const jsllineDatas = reactive({
  name: "日降水量",
  unit: "mm",
  xData: [],
  yData: [],
});

function initData(name: string, num: string) {
  getDetail(name);
}
function getDetail(name: string) {
  deviceDetail({ deviceName: name }).then((res) => {
    info.value = res.data;
    /*风向*/
    getWeatherDirectionAndSpeed({ deviceName: name, size: 7 }).then((response) => {
          fxDatas.xData = response.data.dates;
          fxDatas.yData = []

          response.data.values.forEach(item=>{
            fxDatas.yData.push({
              value: item.fs, //风速--数值大小--变量名不可变
              symbolRotate: item.fx, //风向---旋转角度--变量名不可变
              symbolRotateStr: item.fxName //风向中文--变量名可变（tooltip 提示随之修改）
            })
          })
        }
    );
    /*温度*/
    getWeatherStatistics({ deviceName: name, property: "dqwd", size: 7 }).then((response) => {
        wdlineDatas.xData = response.data.times;
        wdlineDatas.yData = response.data.values;
      }
    );
    /*湿度*/
    getWeatherStatistics({ deviceName: name, property: "dqsd", size: 7 }).then((response) => {
        sdlineDatas.xData = response.data.times;
        sdlineDatas.yData = response.data.values;
      }
    );
    /*日降水量*/
    getWeatherStatistics({ deviceName: name, property: "rjsl", size: 7 }).then((response) => {
        jsllineDatas.xData = response.data.times;
        jsllineDatas.yData = response.data.values;
      }
    );
  });
}
// 暴露变量
defineExpose({
  initData,
});
</script>

<style scoped lang="scss">
@import "../deviceDialog/dialog";
</style>
